<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
  1.keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
    - 它们有两个非常重要的属性:
    - include - 字符串或正则表达，只有匹配的组件会被缓存
    - exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
      keepalive属性：exclude='组件的name' 不包含这个组件
                        include='组件的name',包含这个组件
  2.router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存，
    不会被重复创建和销毁
  3.activated和deactivated函数，只有在该组件被保持了状态使用了keep-alive时，才是有效的
    - 当组件处于活跃时触发
      activated() {
        console.log('activated');
      },
   - 当组件处于不活跃时触发
      deactivated() {
        console.log('deactivated');
      },
-->
</body>
</html>